<template>
	<view>

		<view class="top" v-if="banner.length!=0">
			<u-swiper :list="banner"></u-swiper>
		</view>
		<view v-else style="height: auto; width:750rpx">
			<image :src="get_img+choose.image" style="width: 100%;"></image>
		</view>
		<view>
			<view class="weight" style="float: left;width: 300rpx; margin-top: 20rpx; margin-left: 30rpx;">{{choose.name}}{{choose.area}}m<span
				 class="sb">2</span></view>
			<view class="weight" style="float: right; margin-top: 20rpx; width: 400rpx; color: red;">{{choose.price}}元/m<span
				 class="sb">2</span>起
			</view>
		</view>
		<view style="margin-top: 35px;">
			<u-line color="#8e8e8e"></u-line>
		</view>
		<view style="height: 50rpx;">
			<view style="margin:30rpx 30rpx 0 30rpx;">
				<view class="weights ztdx">面&nbsp;&nbsp;&nbsp;&nbsp;积:
				</view>
				<view class="ztdx">{{choose.area}}(m<span class="sb">2</span>)</view>
				<view class="ywlx ztdx">类&nbsp;&nbsp;&nbsp;型:</view>
				<view class="ywlxs ztdx">{{choose.wy_type}}</view>
			</view>
		</view>
		<view style="height: 50rpx;">
			<view style="margin:30rpx 30rpx 0 30rpx;">
				<view class="weights ztdx">朝&nbsp;&nbsp;&nbsp;&nbsp;向:</view>
				<view class="ztdx">{{choose.direct}}</view>
				<view class="ht ztdx">梯&nbsp;&nbsp;&nbsp;户:</view>
				<view class="hts ztdx">{{choose.th}}</view>
			</view>
		</view>
		<view style="height: 50rpx;">
			<view style="margin:30rpx 30rpx 0 30rpx;">
				<view class="weights ztdx">楼&nbsp;&nbsp;&nbsp;&nbsp;盘:</view>
				<view class="ztdx">{{infor.name}}</view>
				<view class="lc ztdx">楼&nbsp;&nbsp;&nbsp;层:</view>
				<view class="lcs ztdx">{{choose.floor}}</view>
			</view>
		</view>
		<!-- 	<view style="height: 400rpx;">
			<view>
				<u-row customStyle="width: 380rpx;background-color: #4CD964;">
					<view style="background-color: #0081FF;">
						<u-col span="6"></u-col>
					</view>
					<view style="background-color: #02C4C4;">
						<u-col span="6" customStyle=""></u-col>
					</view>
				</u-row>
			</view>
		</view> -->
		<view class="vary" @click="hx_list()">
			<view class="vary_hx">
				更多户型信息
			</view>
			<view class="vary_icon">
				<u-icon name="arrow-right" color="#000" size="60rpx"></u-icon>
			</view>

		</view>
		<view style="margin-top: 5px;height: 10rpx;width: 750rpx;background-color: darkgray;"></view>
		<view>
			<view class="weight" style="margin: 20rpx;">位置及周边配套</view>
			<view style="margin: 20rpx;">位置：{{infor.address}}</view>
			<u-sticky bgColor="#fff">
				<u-tabs :list="infor.around" @change="change">
				</u-tabs>
			</u-sticky>
			<view>
				<image @click="go_position" style="height: 300rpx;width: 650rpx;margin-left: 50rpx;" :src="get_img+choose_index"></image>

			</view>
		</view>
		<view style="height: 110rpx;"></view>
		<BtNav :adviser="custom"></BtNav>
	</view>
</template>

<script>
	import BtNav from '@/components/bottom_nav/bottom_nav.vue'
	export default {
		components: {
			BtNav
		},
		data() {
			return {
				list1: [{
					name: '公交',
				}, {
					name: '教育',
				}, {
					name: '医院'
				}, {
					name: '商业'
				}],
				infor: {},
				choose: {},
				get_img: this.$get_img,
				choose_index: "",
				around: {},
				custom: {},
				banner: []


			}
		},
		onShow() {
			this.infor = uni.getStorageSync("hxxq_infor")
			if (this.infor.around.length > 0) {
				this.choose_index = this.infor.around[0].background
				this.around = this.infor.around[0]
			}
			this.choose = uni.getStorageSync("hxxq_choose")
			this.custom = uni.getStorageSync("hxxq_custom")


		},
		onLoad() {
			let banner = uni.getStorageSync("hxxq_choose1")
			let that = this
			if (banner != 0) {
				banner.forEach(function(value) {
					that.banner.push(that.get_img + value)
				})
			}
		},

		methods: {
			go_position() {
				console.log(this.around)
				uni.setStorageSync("infor1", this.around.content)
				uni.navigateTo({
					url: '../house/data'
				})
				/* 	
					uni.openLocation({
						longitude: this.around.position[0],
						latitude: this.around.position[1]
					}) */

			},
			change(e) {
				this.around = e
				this.choose_index = e.background
			},
			hx_list() {

				uni.navigateTo({
					url: "./hxlist"
				})
			}
		}
	}
</script>

<style>
	.top {
		width: 750rpx;
		height: auto;
		background-color: #000000;

	}

	.vary {
		width: 700rpx;
		height: 80rpx;
		margin: 20rpx 0 0 25rpx;
		border-radius: 20rpx;
		background-color: #f0f0f0;
	}

	.vary_hx {
		color: #000000;
		width: 400rpx;
		height: 60rpx;
		padding: 13rpx 100rpx 0 180rpx;
		font-weight: 800;
		font-size: 40rpx;
		letter-spacing: 10rpx;
	}

	.vary_icon {
		margin-top: -58rpx;
		height: 60rpx;
		padding: 0rpx 20rpx 10rpx 620rpx;
	}

	.weight {
		font-weight: bold;
		float: left;
		width: 170rpx;
	}

	.weights {
		font-weight: bold;
		float: left;
		width: 120rpx;
	}

	.ywlx {
		float: right;
		margin: -50rpx 180rpx 0 200rpx;
		width: 170rpx;
		font-weight: 700;
		width: 120rpx;
	}

	.ywlxs {
		width: 50rpx;
		float: right;
		margin: -48rpx 130rpx 0 0;
	}

	.ht {
		float: right;
		margin: -50rpx 180rpx 0 100rpx;
		width: 170rpx;
		font-weight: 700;
		font-size: 35rpx;
		width: 120rpx;
	}

	.hts {
		width: 190rpx;
		float: right ;margin: -49rpx -10rpx 0 0;
	}

	.lc {
		float: right;
		margin: -50rpx 180rpx 0 100rpx;
		width: 170rpx;
		font-weight: 700;
		width: 120rpx;
	}

	.lcs {
		width: 170rpx;
		float: right;
		margin: -48rpx 10rpx 0 0;
	}

	.sb {
		vertical-align: text-top;
		font-size: 12rpx;
	}

	.ztdx {
		font-size: 35rpx;
	}
</style>
